<template>
  <a-drawer :open="open" :width="360" title="设置" placement="right" :body-style="{ padding: 0 }" @close="onClose">
    <a-card class="h-full !shadow-none">
      <div class="flex items-center">
        <div class="mr-6">主题选择</div>
        <div class="theme">
          <div v-for="color in themeList" :key="color" class="theme-item" :style="{ backgroundColor: color }" @click="onChangeTheme(color)">
            <CheckOutlined v-if="themeStore.colorPrimary === color" style="color: #fff" />
          </div>
        </div>
      </div>
      <a-divider />
      <div class="flex items-center">
        <div class="mr-6">表格间距</div>
        <a-radio-group v-model:value="themeStore.tableSize" button-style="solid" @change="changeTableSize">
          <a-radio-button v-for="size in tableSize" :key="size.value" :value="size.value">{{ size.label }}</a-radio-button>
        </a-radio-group>
      </div>
      <a-divider />
      <div class="flex items-center">
        <div class="mr-6">表单间距</div>
        <a-radio-group v-model:value="themeStore.formSize" button-style="solid" @change="changeFormSize">
          <a-radio-button v-for="size in formSize" :key="size.value" :value="size.value">{{ size.label }}</a-radio-button>
        </a-radio-group>
      </div>
      <a-divider />
      <div class="flex items-center">
        <div class="mr-6">暗黑模式</div>
        <a-switch :checked="themeStore.isDark" @change="onChangeDark" />
      </div>
      <a-divider />
      <div class="flex items-center">
        <div class="mr-6">全屏显示</div>
        <a-switch :checked="isFullscreen" @change="onFullscreen" />
      </div>
      <a-divider />
      <div class="flex items-center">
        <div class="mr-6">菜单折叠</div>
        <a-switch :checked="!appStore.MENU_OPEN" @change="switchMenu" />
      </div>
      <a-divider />
      <div class="flex items-center">
        <div class="mr-6">整体布局</div>
        <a-radio-group :value="themeStore.appSize" button-style="solid" @change="changeSize">
          <a-radio-button value="large">大</a-radio-button>
          <a-radio-button value="middle">中</a-radio-button>
          <a-radio-button value="small">小</a-radio-button>
        </a-radio-group>
      </div>
      <a-divider />
      <div class="flex items-center">
        <div class="mr-6">字体大小</div>
        <a-radio-group :value="themeStore.fontSize" button-style="solid" @change="onChangeFontSize">
          <a-radio-button :value="18">大</a-radio-button>
          <a-radio-button :value="14">中</a-radio-button>
          <a-radio-button :value="12">小</a-radio-button>
        </a-radio-group>
      </div>
      <a-divider v-if="columnCode" />
      <div v-if="columnCode" class="flex items-center">
        <div class="mr-6">本页表头</div>
        <div class="truncate">{{ columnCode }}</div>
      </div>
      <div class="text-center">
        <a-divider />
        <a-button type="default" @click="resetConfig">还原默认设置</a-button>
      </div>
    </a-card>
  </a-drawer>
</template>
<script setup>
import { ref, nextTick } from 'vue'
import { message, theme } from 'ant-design-vue'
import { CheckOutlined } from '@ant-design/icons-vue'
import useAppStore from '@/store/app'
import useThemeStore from '@/store/theme'

const appStore = useAppStore()
const themeStore = useThemeStore()
const props = defineProps({ open: Boolean })
const emit = defineEmits(['close'])
const themeList = ref(['#3758f1', '#f5222d', '#ff8f95', '#faad14', '#52c41a', '#722ed1'])

const tableSize = [
  { label: '大', value: 12 },
  { label: '中', value: 8 },
  { label: '小', value: 6 }
]
const formSize = [
  { label: '大', value: 18 },
  { label: '中', value: 12 },
  { label: '小', value: 10 }
]
const { useToken } = theme
const { token } = useToken()
const onChangeTheme = (color) => {
  themeStore.colorPrimary = color
  nextTick(() => themeStore.changeTheme({ ...token.value, colorPrimary: themeStore.colorPrimary }))
  message.success('主题切换成功')
}
const onClose = () => {
  emit('close')
}
const onChangeDark = (value) => {
  themeStore.isDark = value
  nextTick(() => themeStore.changeTheme({ ...token.value, colorPrimary: themeStore.colorPrimary }))
}
const switchMenu = (value) => {
  appStore.MENU_OPEN = !value
}

const changeSize = (e) => {
  themeStore.appSize = e.target.value
}
const onChangeFontSize = (e) => {
  themeStore.fontSize = e.target.value
}
const changeTableSize = (e) => {
  themeStore.tableSize = e.target.value
}
const changeFormSize = (e) => {
  themeStore.formSize = e.target.value
}
const resetConfig = () => {
  appStore.$reset()
  themeStore.$reset()
  nextTick(() => themeStore.changeTheme({ ...token.value, colorPrimary: themeStore.colorPrimary }))
  message.success('还原成功')
}
const columnCode = ref('')
watch(
  () => props.open,
  (val) => {
    if (val && location.search.includes('debugger')) {
      columnCode.value = JSON.parse(localStorage.getItem('columnCode'))
    } else {
      columnCode.value = ''
    }
  }
)
//设置全屏
const isFullscreen = ref(false)
const onFullscreen = () => {
  isFullscreen.value = !isFullscreen.value
  if (isFullscreen.value) {
    document.querySelector('html').style.minWidth = window.screen.width + 'px'
    document.documentElement.requestFullscreen()
  } else {
    document.querySelector('html').style.minWidth = '1440px'
    document.exitFullscreen()
  }
}
</script>
<style lang="less" scoped>
.theme {
  display: flex;
  flex: 1;
  justify-content: space-around;
  margin: 8px auto;
  .theme-item {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
  }
}
.btn-default {
  position: absolute;
  bottom: 80px;
  left: 0;
  width: 100%;
  text-align: center;
}
</style>
